import React from 'react'
import axios from 'axios'
import utils from '../../utils/utils'
import { Card, Table, Modal, Button, message, Message } from 'antd';


class baseTable extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        const data = [{
            id: 1,
            username: '张三',
            age: 18,
            address: '北京市'
        }, {
            id: 2,
            username: '张三',
            age: 18,
            address: '北京市'
        }, {
            id: 3,
            username: '张三',
            age: 18,
            address: '北京市'
        }]

        //数据源必须要添加唯一的key
        data.map((item, index) => item.key = index)

        this.setState({
            data
        })

        //动态获取数据
        this.request()
    }

    request = () => {
        const Url = ' https://www.easy-mock.com/mock/5bdc5b99f3dd6975f8bc732b/immocapi'
        axios.get(Url + '/table/list1').then(res => {
            // console.log(res.data.result)
            if (res.status == '200') {
                if (res.data.code == '0') {

                    //这个map 是为了给数据源加上唯一的key
                    res.data.result.item_list.map((item, index) => {
                        item.key = index
                    })

                    this.setState({
                        data2: res.data.result.item_list,
                        //删除时 发送一次请求时，重置选中的行
                        selectRowKeys: [],
                        selectRowItem: null
                    })

                } else {
                    Modal.info({
                        title: '错误',
                        content: '这是一个错误提示'
                    })
                }
            }

        })
    }

    //获取表格一行上的数据
    onRowClick = (record, index) => {
        let selectKey = [index]  //选中行的索引key 值
        // Modal.info({
        //     title: '选中一行弹出信息',
        //     content: record.username + record.address
        // })s
        this.setState({
            selectRowKeys: selectKey,
            selectRowItem: record  //选中的哪一项，并且获取到这一项上的数据
        })
    }

    //复选框的删除
    handleDelete = () => {
        const { selectRowItem } = this.state //获取一行上的数据
        let ids = []
        selectRowItem.map((item) => {
            ids.push(item.id)
        })
        // Modal.confirm({
        //     title: '删除提示',
        //     content: `你确定要删除这条数据吗? ${ids.join(',')}`,
        //     onOK: () => {
        //         console.log('111')
        //         message.success('删除成功')
        //         //删除之后，重新刷新页面
        //         this.request()
        //     }
        // })
        Modal.confirm({
            title: '删除提示',
            content: `您确定要删除这些数据吗 ${ids.join(',')} `,
            onOk: () => {
                Message.success('删除成功');
                this.request()
            }
        })
    }
    render() {
        const columns = [{
            title: 'id',
            dataIndex: 'id'
        }, {
            title: '姓名',
            dataIndex: 'username'
        }, {
            title: '性别',
            dataIndex: 'sex',
            render(sex) {
                // return sex == 1 ? '男' : '女'
                let config = {
                    '1': '男',
                    '2': '女'
                }
                return config[sex]
            }
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
            render(statu) {
                let config = {
                    '1': '咸鱼一条',
                    '2': '婳婳的书',
                    '3': '风华浪子',
                    '4': '明天就好',
                    '5': '创业者'
                }
                return config[statu];
            }
        }, {
            title: '地址',
            dataIndex: 'address'
        }
        ]

        const { selectRowKeys } = this.state
        const rowSelection = {
            type: 'radio',
            //selectedRowKeys 指定选中项的 key 数组
            selectRowKeys
        }

        // 设置复选框
        const rowCheckSelection = {
            type: 'checkbox',
            selectRowKeys,
            //选中项发生变化时的回调
            //selectedRowKeys 确定选中的哪一行， selectRowItem 选中的一行上的数据
            onChange: (selectRowKeys, selectRowItem) => {
                //利用得到的数据进行 删除等其他操作
                // let ids = []
                // selectRowItem.map((item)=>{
                //     ids.push(item.id)
                // })
                this.setState({
                    selectRowKeys,  //这个是必须的确定是哪一行
                    //   selectId: ids
                    selectRowItem
                })
            }

        }

        return (
            <div>
                <Card>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.data}
                    ></Table>
                </Card>
                <Card title='动态获取数据' style={{ marginTop: 15 }}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.data2}
                    ></Table>
                </Card>
                <Card title='rowSelection应用 添加单选框'>
                    <Table
                        rowSelection={rowSelection}
                        //选中一行
                        onRow={(record, index) => {
                            return {
                                onClick: () => {  //点击行
                                    this.onRowClick(record, index)
                                }
                            }
                        }
                        }
                        bordered
                        columns={columns}
                        dataSource={this.state.data2}
                    ></Table>
                </Card>
                <Card title='rowSelection应用 添加复选框'>
                    <Button
                        type='primary' style={{ marginBottom: 15 }}
                        onClick={this.handleDelete}
                    >删除</Button>
                    <Table
                        rowSelection={rowCheckSelection}
                        //选中一行
                        onRow={(record, index) => {
                            return {
                                onClick: () => {  //点击行
                                    this.onRowClick(record, index)
                                }
                            }
                        }
                        }
                        bordered
                        columns={columns}
                        dataSource={this.state.data2}
                    ></Table>
                </Card>
            </div>
        )
    }
}

export default baseTable